<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>功能需求创建页面</title>

    <!--可选，字体-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <!--Bootstrap Stylesheet [ 必须的 ]-->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <!--Nifty Stylesheet [ 必须的 ]-->
    <link href="../../../css/nifty.min.css" rel="stylesheet">
    <!--Nifty Premium Icon [ demo用到的icon css ]-->
    <link href="../../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <!--=================================================-->
    <!--Pace - 页面加载进度条 [可选]-->
    <link href="../../../plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../../../plugins/pace/pace.min.js"></script>
    <!--Demo [ demo用到的css ]-->
    <link href="../../../css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--alex2:Bootstrap Select [ 下拉框 ]-->
    <link href="../../../plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <!--Themify Icons [ 图标样式 ]-->
    <link href="../../../plugins/themify-icons/themify-icons.min.css" rel="stylesheet">
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <navbar></navbar>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">
            <div id="page-head">
            </div>


            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div class="panel">
                    <div class="panel-body">
                        <div class="blog-content">
                            <div class="blog-body">
                                <div class="pad-lft">
                                    <p>产品名称：{{productInfo.name}}</p>
                                    <p>产品代号：{{productInfo.codeName}}</p>
                                    <p>终端类型：
                                        <span v-if="productInfoTerminalIntTypes=='1'">PC 端</span><span v-if="productInfoTerminalIntTypes=='2'">App 端</span><span v-if="productInfoTerminalIntTypes=='3'">其他</span>
                                        <span v-if="productInfoTerminalIntTypes=='1,2'">PC 端,App 端</span><span v-if="productInfoTerminalIntTypes=='2,1'">PC 端,App 端</span><span v-if="productInfoTerminalIntTypes=='1,3'">PC 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,1'">PC 端,其他</span><span v-if="productInfoTerminalIntTypes=='2,3'">App 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,2'">App 端,其他</span>
                                        <span v-if="productInfoTerminalIntTypes=='1,2,3'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='1,3,2'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='2,3,1'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='2,1,3'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,2,1'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,1,2'">PC 端,App 端,其他</span>
                                    </p>
                                    <p>行业类型：<span v-if="productInfo.dicIndustryId=='1'">教育</span><span v-if="productInfo.dicIndustryId=='2'">金融</span><span v-if="productInfo.dicIndustryId=='3'">医疗</span><span v-if="productInfo.dicIndustryId=='4'">其他</span></p>
                                    <p>产品类型：<span v-if="productInfo.dicProductInfoTypeId=='1'">教育</span><span v-if="productInfo.dicProductInfoTypeId=='2'">金融</span><span v-if="productInfo.dicProductInfoTypeId=='3'">医疗</span><span v-if="productInfo.dicProductInfoTypeId=='4'">其他</span></p>
                                    <p>产品介绍：{{productInfo.des}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="panel panel-body">
                            <!--Panel heading-->
                            <div class="panel-heading">
                                <h4 class="pad-btm bord-btm"><i class="demo-pli-male-female icon-fw v-middle"></i> 功能需求
                                    <div class="panel-control">
                                        <button class="btn btn-default" data-panel="fullscreen">
                                            <i class="icon-max demo-psi-maximize-3"></i>
                                            <i class="icon-min demo-psi-minimize-3"></i>
                                        </button>
                                    </div>
                                </h4>
                            </div>
                            <!--Panel body-->
                            <div class="pad-all" v-for="(pdInfoReqsModuleVo,index1) in pdInfoReqsModuleVos">
                                <!--一行一个模块区域-->
                                <div class="row pad-all">
                                    <div class="col-sm-5">
                                        <p><span class="label label-info mar-rgt">No.{{index1+1}}</span>
                                            <a href="#" class="btn btn-sm btn-icon btn-danger ti-trash icon-lg add-tooltip pull-right" data-original-title="删除流程" data-container="body" @click="delReqsModule(index1)"></a>
                                            <a href="#" class="btn btn-sm btn-icon btn-primary ti-plus mar-rgt icon-lg add-tooltip pull-right" data-original-title="添加新流程" data-container="body" @click="appendReqsModule()"></a>
                                        </p>
                                        <div class="form-group">
                                            <label class="control-label">模块名称</label>
                                            <input type="text" class="form-control" v-model="pdInfoReqsModuleVo.name">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">模块介绍</label>
                                            <textarea rows="9" class="form-control" placeholder="Your content here.." v-model="pdInfoReqsModuleVo.des"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                    </div>
                                    <div class="col-sm-6">
                                        <!--一个功能一行-->
                                        <div class="row"  v-for="(pdInfoReq,index2) in pdInfoReqsModuleVo.pdInfoReqs">
                                            <p><span class="label label-info mar-rgt">No.{{index1+1}}-{{index2+1}}</span>
                                                <a href="#" class="btn btn-sm btn-icon btn-danger ti-trash icon-lg add-tooltip pull-right" data-original-title="删除流程" data-container="body" @click="delReqs(index1,index2)"></a>
                                                <a href="#" class="btn btn-sm btn-icon btn-primary ti-plus mar-rgt icon-lg add-tooltip pull-right" data-original-title="添加新流程" data-container="body" @click="appendReqs(index1)"></a>
                                            </p>
                                            <div class="form-group">
                                                <label class="control-label">功能名称</label>
                                                <input type="text" class="form-control" v-model="pdInfoReq.name">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">功能介绍</label>
                                                <textarea rows="9" class="form-control" v-model="pdInfoReq.des"></textarea>
                                            </div>
                                            <hr>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group pull-right">
                            <button type="button" class="btn btn-info" @click="save4Draft()">存为草稿</button>
                            <button type="button" class="btn btn-info" @click="save4Approval()">提交审核</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->

        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <mainnav></mainnav>

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pad-rgt pull-right">
            You have <a href="#" class="text-main"><span class="badge badge-danger">3</span> pending action.</a>
        </div>


        <!-- Visible when footer positions are static -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="hide-fixed pull-right pad-rgt">
            14GB of <strong>512GB</strong> Free.
        </div>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">&#0169; 2018 Your Company</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->


<!--JAVASCRIPT-->
<!--jQuery [ 必须的 ]-->
<script src="../../../js/jquery.min.js"></script>
<!--BootstrapJS [ 必须的 ]-->
<script src="../../../js/bootstrap.min.js"></script>
<!--NiftyJS [ 必须 ]-->
<script src="../../../js/nifty.min.js"></script>
<!--=================================================-->
<!--Demo script [ demo示例使用 ]-->
<script src="../../../js/demo/nifty-demo.min.js"></script>

<!--alex2:Bootstrap Select [ 下拉框 ]-->
<script src="../../../plugins/bootstrap-select/bootstrap-select.min.js"></script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--组件导航条-->
<script src="../../../js/component/header.js"></script>
<!--组件导航栏-->
<script src="../../../js/component/mainnav.js"></script>
<!--公共端口号-->
<script src="../../../js/route/route.js"></script>
<!--axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    var vue=new Vue({
        el:"#container",
        data: {
            //前端终端类型
            productInfoTerminalIntTypes:[],
            pdInfoReqsModuleVos:[
                {
                    pdInfoReqs:[{}]
                }
            ],
            //后端
            productInfo:{
                //终端类型
                productInfoTerminalTypes:[],
                //业务流程
                pdInfoReqsModules:[
                    {
                        pdInfoReqs:[{}]
                    }

                ],
            }
        },
        methods: {
            detail() {
                let productInfoCode = localStorage.getItem("productInfoCode");
                var str="";
                var productInfoTerminalTypeStr="";
                axios.get(`${window.dasConfig.ipPort}/project/product-info/detail/`+productInfoCode).then(res=>{
                    vue.productInfo=res.data;
                })
                axios.get(`${window.dasConfig.ipPort}/project/product-info/findProductInfoTerminalType/`+productInfoCode).then(res=>{
                    vue.productInfo.productInfoTerminalTypes=res.data;
                    for(productInfoTerminalType of vue.productInfo.productInfoTerminalTypes){
                        productInfoTerminalTypeStr+=","+productInfoTerminalType.type;
                        str=productInfoTerminalTypeStr.substring(1);
                    }
                    vue.productInfoTerminalIntTypes=str;
                    console.log(vue.productInfoTerminalIntTypes);
                })
            },
            appendReqsModule(){
                vue.pdInfoReqsModuleVos.push({pdInfoReqs:[{}]});
            },
            delReqsModule(index1){
                this.pdInfoReqsModuleVos.splice(index1,1);
            },
            appendReqs(index1){
                alert(index1);
                vue.pdInfoReqsModuleVos[index1].pdInfoReqs.push({});
            },
            delReqs(index1,index2){
                alert(index1);
                vue.pdInfoReqsModuleVos[index1].pdInfoReqs.splice(index2,1);
            },
            save4Draft() {
                vue.productInfo.pdInfoReqsModules=vue.pdInfoReqsModuleVos;
                axios.post(`${window.dasConfig.ipPort}/project/pd-info-reqs/save4Draft`,vue.productInfo).then(res=>{
                    if(res){
                        alert("功能需求存为草稿成功!")
                        location.href="../product-info/product-info-list.html";
                    }
                });
            },
            save4Approval() {
                vue.productInfo.pdInfoReqsModules=vue.pdInfoReqsModuleVos;
                axios.post(`${window.dasConfig.ipPort}/project/pd-info-reqs/save4Approval`,vue.productInfo).then(res=>{
                    if(res){
                        alert("功能需求提交成功!")
                        location.href="../product-info/product-info-list.html";
                    }
                });
            }
        },
        created() {
            this.detail();
        }
    })
</script>
</body>
</html>
